<!doctype html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
    <head>
        <!-- meta data -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <!--font-family-->
		<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&amp;subset=devanagari,latin-ext" rel="stylesheet">
        
        <!-- title of site -->
        <title>Sign up</title>
        <!-- For favicon png -->
		<link rel="shortcut icon" type="image/icon" th:href="@{/assets/logo/favicon.png}"/>
       
        <!--font-awesome.min.css-->
        <link rel="stylesheet" th:href="@{/assets/css/font-awesome.min.css}"/>

		<!--animate.css-->
        <link rel="stylesheet" th:href="@{/assets/css/animate.css}"/>
		
        <!--bootstrap.min.css-->
        <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}"/>
		
		<!-- bootsnav -->
		<link rel="stylesheet" th:href="@{/assets/css/bootsnav.css}" />
        
        <!--style.css-->
        <link rel="stylesheet" th:href="@{/assets/css/style.css}"/>
        
        <!--responsive.css-->
        <link rel="stylesheet" th:href="@{/assets/css/responsive.css}"/>
		
        <!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
	<script th:src="@{/assets/js/jquery-3.2.0.js}" type="text/javascript" charset="utf-8"></script>
	<script>
		//验证手机号
		function checkPhoneNumber(){
			var phoneNumber = $('#phoneNumber').val();
			var phoneNumberStr = /^\d{11}$/;
			var expPhoneNumber = new RegExp(phoneNumberStr);
			if(expPhoneNumber.test(phoneNumber)==false){
				$('#phoneNumbererr').text("请输入11位的手机号码");
			}else{
				$('#phoneNumbererr').text("");
			}
			if(phoneNumber.length==0){
				$('#phoneNumbererr').text("");
			}
			if(phoneNumber.length!=0 && phoneNumber.length==11){
				$.ajax({
					url: "http://localhost:9081/java-project/user/isregister/"+phoneNumber,
					success:function(result){
						if(result){
							$('#phoneNumbererr').text("");
						}else{
							$('#phoneNumbererr').text("该手机号已经注册");
						}
					}
				});
			}
		}
		//验证真实姓名
		function checkRealName(){
			var realName = $('#realName').val();
			var realNameStr = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
			var expRealName = new RegExp(realNameStr);
			if(expRealName.test(realName)==false){
				$('#realNameerr').text("请输入您的真实姓名");
			}else{
				$('#realNameerr').text("");
			}
			if(realName.length==0){
				$('#realNameerr').text("");
			}
		}
		//验证身份证号
		function checkIdNumber(){
			var idNumber = $('#idNumber').val();
			var idNumberStr =  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			var expIdNumber = new RegExp(idNumberStr);
			if(expIdNumber.test(idNumber)==false){
				$('#idNumbererr').text("请输入正确的身份证号");
				flag = false;
			}else{
				$('#idNumbererr').text("");
			}
			if(idNumber.length==0){
				$('#idNumbererr').text("");
			}
		}
		//验证密码
		function checkUserPass(){
			var userPass = $('#userPass').val();
			if(userPass.length<6 || userPass.length>16){
				flag = false;
				$('#userPasserr').text("请输入6-16位的密码");
			}else{
				var userPassStr =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
				var expUserPass = new RegExp(userPassStr);
				if(expUserPass.test(userPass)==false){
					$('#userPasserr').text("请输入字母和数字组合的密码");
					flag = false;
				}else{
					$('#userPasserr').text("");
				}
			}
			if(userPass.length==0){
				$('#userPasserr').text("");
			}
		}
		//确认密码
		function checkReUserPass(){
			var reUserPass = $('#reUserPass').val();
			var userPass = $('#userPass').val();
			if(reUserPass!=userPass){
				flag = false;
				$('#reUserPasserr').text("两次密码输入不一致");
			}else {
				$('#reUserPasserr').text("");
			}
			if(userPass.length==0){
				$('#userPasserr').text("");
			}
		}

	</script>

	<body>
		<!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
		
		<!-- signin end -->
		<section class="signin signup">
			<div class="container">

				<div class="sign-content">
					<h2>注册</h2>
					
					<div class="row">
						<div class="col-sm-12">
							<div class="signin-form">
								<form th:action="@{/user/adduser}" method="post">
									<div class="form-group">
										    <label for="phoneNumber">手机号</label>
										<!--//"-->
										    <input type="text" th:value="${user?.phoneNumber}" name="phoneNumber" onblur="checkPhoneNumber()" class="form-control" id="phoneNumber" placeholder="请输入手机号">
										<span style="color: #ff0000;font-size: 16px" th:text="${phoneNumbererr}" id="phoneNumbererr"></span>
									</div><!--/.form-group -->
									<div class="form-group">
										<label for="realName">真实姓名</label>
										    <input type="text" th:value="${user?.realName}" name="realName" onblur="checkRealName()" class="form-control" id="realName" placeholder="请输入真实姓名">
										<span style="color: #ff0000;font-size: 16px" th:text="${realNameerr}" id="realNameerr"></span>
									</div><!--/.form-group -->
									<div class="form-group">
										<label for="idNumber">身份证号</label>
									    <input type="text" th:value="${user?.idNumber}" name="idNumber" onblur="checkIdNumber()" class="form-control" id="idNumber" placeholder="请输入身份证号">
										<span style="color: #ff0000;font-size: 16px" th:text="${idNumbererr}" id="idNumbererr"></span>
									</div><!--/.form-group -->
									<div class="form-group">
										<label for="userPass">密码</label>
									    <input type="password" th:value="${user?.userPass}" name="userPass" onblur="checkUserPass()" class="form-control" id="userPass" placeholder="请输入密码">
										<span style="color: #ff0000;font-size: 16px" th:text="${userPasserr}" id="userPasserr"></span>
									</div><!--/.form-group -->
									<div class="form-group">
										<label for="reUserPass">确认密码</label>
									    <input type="password" name="reUserPass" onblur="checkReUserPass()" class="form-control" id="reUserPass" placeholder="再次确认密码">
										<span style="color: #ff0000;font-size: 16px" th:text="${reUserPasserr}" id="reUserPasserr"></span>
									</div><!--/.form-group -->
									<div class="row">
										<div class="col-sm-12">
											<div class="signin-footer">
<!--												<button type="button" class="btn signin_btn" data-toggle="modal" data-target=".signin_modal">-->
<!--													注册-->
<!--												</button>-->
												<input type="submit" class="btn signin_btn" data-toggle="modal" value="注册">
												<p style="margin-left: 40%">
													已有帐号  ?
													<a th:href="@{/user/signin}">登录</a>
												</p>
											</div><!--/.signin-footer -->
										</div><!--/.col-->
									</div><!--/.row -->
								</form><!--/form -->
							</div><!--/.signin-form -->
						</div><!--/.col -->
					</div><!--/.row -->

<!--					<div class="row">-->
<!--						<div class="col-sm-12">-->
<!--							<div class="signin-footer">-->
<!--								<button type="button" class="btn signin_btn" data-toggle="modal" onclick="check()" data-target=".signin_modal">-->
<!--								注册-->
<!--								</button>-->
<!--								<p style="margin-left: 40%">-->
<!--									    已有帐号  ?-->
<!--									<a th:href="@{/user/signin}">登录</a>-->
<!--								</p>-->
<!--							</div>&lt;!&ndash;/.signin-footer &ndash;&gt;-->
<!--						</div>&lt;!&ndash;/.col&ndash;&gt;-->
<!--					</div>&lt;!&ndash;/.row &ndash;&gt;-->

				</div><!--/.sign-content -->

				<!-- modal part start -->
				<div class="modal fade signin_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<div class="sign-content">

								<div class="modal-header">
									<h2>sign up</h2>
								</div><!--/.modal-header -->

								<div class="modal-body">
									<div class="signin-form">
										<div class=" ">
											<div class=" ">
												<form action="signin.html">
													<div class="form-col">
														<div class="form-group">
															<label for="signin_form1">first name</label>
															<input type="text" class="form-control" id="signin_form1" placeholder="first name">
														</div><!--/.form-group -->
													</div><!--/.form-col -->
													<div class="form-col1">
														<div class="form-group">
															<label for="signin_form2">last name</label>
															<input type="text" class="form-control" id="signin_form2" placeholder="last name">
														</div><!--/.form-group -->
													</div><!--/.form-col1 -->
													<div class="form-group">
														<label for="signin_form3">Email</label>
														<input type="email" class="form-control" id="signin_form3" placeholder="enter your email here">
													</div><!--/.form-group -->
													<div class="form-group">
														<label for="signin_form4">password</label>
														<input type="password" class="form-control" id="signin_form4" placeholder="Password">
													</div><!--/.form-group -->
													<div class="form-group">
														<label for="signin_form5">retype password</label>
														<input type="password" class="form-control" id="signin_form5" placeholder="Retype Password">
													</div><!--/.form-group -->
												</form><!--/form -->
											</div><!--/.col -->
										</div><!--/.row -->

									</div><!--/.signin-form -->

									<div class="signin-password">
										<div class="awesome-checkbox-list">
											<ul class="unstyled centered">

												<li>
													<input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3">
													<label for="styled-checkbox-3">accept our terms & condition</label>
												</li>

												<li></li>

											</ul>
										</div><!--/.awesome-checkbox-list -->
									</div><!--/.signin-password -->

									<div class="signin-footer">
										<button type="button" class="btn signin_btn" data-toggle="modal" data-target=".signin_modal">
											sign up
										</button>
										<p>
											already member ?
											<a href="signin.html">sign in</a>
										</p>
									</div><!--/.signin-footer -->
								</div><!--/.modal-body -->

							</div><!--/.sign-content -->
						</div><!--/.modal-content -->
					</div><!--/.modal-dialog -->
				</div><!--/.modal -->
				<!-- modal part end -->
			</div><!--/.container -->

		</section><!--/.signin -->

		<!-- signin end -->

		<!--footer copyright start -->
		<footer class="footer-copyright">
			<div id="scroll-Top">
				<i class="fa fa-angle-double-up return-to-top" id="aaa" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
			</div><!--/.scroll-Top-->

		</footer><!--/.hm-footer-copyright-->
		<!--footer copyright  end -->


		<!-- Include all js compiled plugins (below), or include individual files as needed -->

		<script th:src="@{/assets/js/jquery.js}"></script>

		<!--modernizr.min.js-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

		<!--bootstrap.min.js-->
		<script th:src="@{/assets/js/bootstrap.min.js}"></script>

		<!-- bootsnav js -->
		<script th:src="@{/assets/js/bootsnav.js}"></script>

		<!-- jquery.sticky.js -->
		<script th:src="@{/assets/js/jquery.sticky.js}"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>


		<!--Custom JS-->
		<script th:src="@{/assets/js/custom.js}"></script>

	</body>
	
</html>